본문으로 건너뛰기

Custom Hooks 반환의 종류

React에서 Hooks는 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해줍니다. 그중에서도 Custom Hooks는 코드 재사용성을 높이고, 컴포넌트의 상태 관리 로직을 분리하는 데 매우 유용합니다. 이번에는 Custom Hooks가 반환할 수 있는 다양한 종류에 대해 알아보겠습니다.

Custom Hooks란?​

Custom Hooks는 리액트 훅의 로직을 재사용하기 위해 작성하는 함수입니다. 일반 함수와 다르게 React Hook(예: useState, useEffect 등)을 내부에서 호출할 수 있습니다.

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

위 예시에서 useWindowWidth라는 Custom Hook은 창의 너비를 반환합니다.

Custom Hooks 반환의 종류​

1. 단일 값 반환​

가장 단순한 형태로, 하나의 값을 반환하는 경우입니다. 예를 들어, useWindowWidth는 현재 창의 너비를 반환합니다.

const width = useWindowWidth();

2. 객체 반환​

여러 값을 반환하고 싶을 때 객체를 반환할 수 있습니다. 이는 여러 상태나 함수를 함께 반환할 때 유용합니다.

function useUser() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser().then(data => {
      setUser(data);
      setLoading(false);
    });
  }, []);

  return { user, loading };
}

const { user, loading } = useUser();

3. 배열 반환​

객체를 반환하는 것과 유사하게, 배열을 반환할 수도 있습니다. 이 경우에는 반환 값의 순서가 중요합니다. 보통 튜플 형태로 사용됩니다.

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => setValue(v => !v);

  return [value, toggle];
}

const [isToggled, toggle] = useToggle();

4. 함수 반환​

Custom Hooks에서 함수만 반환할 수도 있습니다. 이 함수는 Custom Hook 내에서 정의된 로직을 실행합니다.

function useFetch(url) {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const response = await fetch(url);
    const result = await response.json();
    setData(result);
  };

  return fetchData;
}

const fetchUserData = useFetch('https://api.example.com/user');

주의사항​

  1. Hook은 최상위에서 호출: Custom Hook은 컴포넌트나 다른 Hook의 최상위에서만 호출해야 합니다.
  2. 의존성 배열 관리: useEffect나 useCallback 등의 의존성 배열을 적절히 관리하여 불필요한 리렌더링을 방지해야 합니다.
  3. 명확한 반환 타입: 반환 값의 타입과 구조를 명확히 하여 사용하는 쪽에서 혼동이 없도록 합니다.

더 알아보기​

  • React 공식 문서
  • useState 사용법
  • useEffect 사용법
  • Custom Hooks 작성법

내용 요약​

Custom Hooks는 React에서 코드 재사용성을 높이고 컴포넌트 상태 관리 로직을 분리하는 데 유용한 도구입니다. 단일 값, 객체, 배열, 함수 등 다양한 형태로 값을 반환할 수 있으며, 각 형태에 따라 사용 방법이 달라집니다. Custom Hook을 사용할 때는 최상위에서 호출하고, 의존성 배열을 적절히 관리하며, 반환 값의 타입과 구조를 명확히 해야 합니다.